<template>
  <div class="orderManagement">
    <div class="filter">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="城市：">
          <el-select v-model="cityId" placeholder="请选择城市" size="mini">
            <el-option :label="item.name" :value="item.id" v-for="item in cityList" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产权公司：">
          <el-select v-model="companyId" placeholder="请选择产权公司" size="mini">
            <el-option :label="item.name" :value="item.id" v-for="item in companyList" :key="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单号：">
          <el-input v-model="params.orderNum" placeholder="请输入订单号码" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="订单名称：">
          <el-input v-model="params.orderName" placeholder="请输入订单名称" size="mini"></el-input>
        </el-form-item>
        <div style="display:inline-block">
          <span class="search-bar-name" style="font-size:14px;color:#606266">自定义时间：</span>
          <el-date-picker
            style="margin-top:5px"
            v-model="timeSpecial"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="changeTime"
            size="mini">
          </el-date-picker>
        </div>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="mini" id="monitorEnter">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tal">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="1"><tab :orderListData='orderListData'></tab></el-tab-pane>
        <el-tab-pane label="待分配" name="2"><tab :orderListData='orderListData'></tab></el-tab-pane>
        <el-tab-pane label="办理中" name="3"><tab :orderListData='orderListData'></tab></el-tab-pane>
        <el-tab-pane label="已完成" name="4"><tab :orderListData='orderListData'></tab></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import tab from './tab'
export default {
  name:'orderManagement',
  components:{tab},
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      companyList:[],
      cityList:[],
      cityId:'',
      companyId:'',
      params:{
        orderNum:'',
        orderName:'',
      },
      timeSpecial: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      status:1,
      activeName: '1',
      orderListData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
    }
  },
  created(){
    this.orderList()
  },
  methods: {
    onSubmit() {
      console.log('submit!');
      this.orderList()
    },
    changeTime(val){
      console.log(val)
    },
    handleClick(tab, event) {
      this.status = tab.name
      console.log(tab.name,event)
    },
    // 项目列表
    orderList(){

    }
  }
}
</script>

<style lang="stylus" scoped>
  .orderManagement{
    .el-input__inner{
      width :250px!important;
    }
  }
</style>